<template>
  <div id="main" style="width: 1000px; height: 400px"></div>
</template>

<script setup>
import { defineProps, toRefs, watch } from 'vue'
import { reqGetSaleMessage } from '@/api/sale'
import * as echarts from 'echarts'
const props = defineProps(['searchParams'])
const { searchParams } = toRefs(props)
watch(props, (newValue, oldValue) => {
  getSaleMEssage()
})
// 获取信息的方法
const getSaleMEssage = async () => {
  const result = await reqGetSaleMessage(searchParams.value)
  if (result.code === 200) {
    handleResult(result.data)
    drawChart(xData, yData)
  }
}
// 处理返回数据的方法
// x轴
let xData = []
// y轴
let yData = []
const handleResult = (result) => {
  yData = []
  const { year, month, months, days } = searchParams.value
  if (year === '' && month === '') {
    // x轴为年
    const obj = {}
    result.forEach((e) => {
      obj[e.y] = e.sum
    })
    xData = Object.keys(obj).sort()
    xData.forEach((e) => {
      yData.push(obj[e])
    })
  } else if (year !== '' && month === '') {
    // x轴为月
    const obj = {}
    result.forEach((e) => {
      obj[e.m] = e.sum
    })
    xData = Object.keys(obj).sort()
    Object.assign(xData, months)

    xData.forEach((e) => {
      if (obj[e] === undefined) {
        yData.push(0)
      } else {
        yData.push(obj[e])
      }
    })
  } else {
    // x轴为日
    const obj = {}
    result.forEach((e) => {
      obj[e.d] = e.sum
    })
    xData = Object.keys(obj).sort()
    Object.assign(xData, days)
    xData.forEach((e) => {
      if (obj[e] === undefined) {
        yData.push(0)
      } else {
        yData.push(obj[e])
      }
    })
  }
}
const drawChart = (xData, yData) => {
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'))
  // 绘制图表
  myChart.setOption({
    title: {
      text: 'ECharts 入门示例'
    },
    tooltip: {},
    xAxis: {
      data: xData
    },
    yAxis: {},
    series: [
      {
        name: '销量',
        type: 'bar',
        data: yData
      }
    ]
  })
}

/*
参数 : year month staffNumber oneType twoType

1：无
  全部销量 x：年份 y：销量
2：year
  当年销量 x：月份 y：销量
3：year mouth
  当月销量 x：日期 y：销量

4：staffNumber
  员工的全部销量 x：年份 y：销量
4：year staffNumber
  员工的当年销量 x：月份 y：销量
5：year month staffNumber
  员工的当月销量 x：日期 y：销量

6：oneType
  一级类别的全部销量 x：年份 y：销量
7：year oneType
  一级类别的当年销量 x：月份 y：销量
8：year month oneType
  一级类别的当月销量 x：日期 y：销量

9：oneType twoType
  二级类别的全部销量 x：月份 y：销量
10：year oneType twoType
  二级类别的当年销量 x：年份 y：销量
11：year month oneType twoType
  二级类别的当月销量 x：日期 y：销量

*/
</script>

<style lang="sass" scoped></style>
